<template>
    <div id="login">
        <h3>欢迎登录</h3>
        <el-form :label-position="labelPosition" ref="ruleForm" :rules="rules" label-width="80px" :model="user">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="user.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="user.password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="login('ruleForm')">立即登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "LoginView",
        methods: {
            login(formName) {
                //this.$refs[formName]  获取表单对象
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //  发送异步请求  200
                        this.$message({
                            message: '异步请求已发送',
                            type: 'success'
                        });
                        this.$router.push("/index")
                    } else {
                        // this.$message({
                        //     message: '请填写完整的用户信息',
                        //     type: 'error'
                        // });
                        this.$message.error("请填写完整的用户信息")
                        return false;
                    }
                });

            }
        },
        data() {
            return {
                labelPosition: 'left',
                user: {
                    username: '',
                    password: ''
                },
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {min: 3, max: 6, message: "用户名3-6字符", trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ]
                }
            }
        }
    }
</script>

<style scoped>
    #login {
        width: 400px;
        height: 260px;
        text-align: center;
        margin: 200px auto;
    }
    h3{
        box-sizing: border-box;
        padding-left: 60px;
    }
</style>
